<template>
  <div class="page">
    <div class="w crumb">首页 / 订单</div>
    <div class="w mod-u clearfix">
      <div class="menu">
        <ul>
          <li><a href="#"><i class="iconfont icon-geren"></i>个人中心</a></li>
          <li><a href="#" class="active"><i class="iconfont icon-tongyong"></i>订单</a></li>
          <li><a href="#"><i class="iconfont icon-wufu"></i>喜欢</a></li>
          <li><a href="#"><i class="iconfont icon-yzm"></i>前端蜗牛</a></li>
        </ul>
      </div>
      <div class="u-page">
        <div class="u-title">订单</div>
        <div class="mad-order">
          <div class="table-box">
            <table class="order-table" width="100%" border="0" cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <td class="id">产品信息</td>
                  <td class="price">单价</td>
                  <td class="num">数量</td>
                  <td class="price2">金额</td>
                  <td>订单状态</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="id">
                    <div class="o_id">订单编号：19060566769254<span>下单时间：2019-06-05 14:02</span></div>
                    <div class="item">
                      <a href="#" target="_blank">
                        <img src="https://img0.c.yinyuetai.com/user/myHomeSquare/151208/0/-M-5cc130a4e7896afcbd9e0763fb8c352a_200x200.jpg" width="80" height="80" alt="">
                        <div class="info">
                          <h4>【全款现货】鹿晗《Reloaded 重启（CD+DVD）》</h4>
                        </div>
                      </a>
                    </div>
                  </td>
                  <td class="price">62.0元</td>
                  <td class="num">x11</td>
                  <td class="price2">72.0元</td>
                  <td class="opts">
                    <a href="#">订单详情</a>
                    <a href="#" class="b_pay">立即支付</a>
                  </td>
                </tr>
                <tr>
                  <td class="id">
                    <div class="o_id">订单编号：19060566769254<span>下单时间：2019-06-05 14:02</span></div>
                    <div class="item">
                      <a href="#" target="_blank">
                        <img src="https://img0.c.yinyuetai.com/user/myHomeSquare/151208/0/-M-5cc130a4e7896afcbd9e0763fb8c352a_200x200.jpg" width="80" height="80" alt="">
                        <div class="info">
                          <h4>CSS实现单行、多行文本溢出显示省略号的实现方法 重CSS实现单行、多行文本溢出显示省略号的实现方法</h4>
                        </div>
                      </a>
                    </div>
                  </td>
                  <td class="price">62.0元</td>
                  <td class="num">x11</td>
                  <td class="price2">72.0元</td>
                  <td class="opts">
                    已完成
                  </td>
                </tr>
                <tr>
                  <td class="id">
                    <div class="o_id">订单编号：19060566769254<span>下单时间：2019-06-05 14:02</span></div>
                    <div class="item">
                      <a href="#" target="_blank">
                        <img src="https://img0.c.yinyuetai.com/user/myHomeSquare/151208/0/-M-5cc130a4e7896afcbd9e0763fb8c352a_200x200.jpg" width="80" height="80" alt="">
                        <div class="info">
                          <h4>CSS实现单行、多行文本溢出显示省略号的实现方法 重CSS实现单行、多行文本溢出显示省略号的实现方法</h4>
                        </div>
                      </a>
                    </div>
                  </td>
                  <td class="price">62.0元</td>
                  <td class="num">x11</td>
                  <td class="price2">72.0元</td>
                  <td class="opts">
                    <a href="#">订单详情</a>
                  </td>
                </tr>
                <tr>
                  <td class="id">
                    <div class="o_id">订单编号：19060566769254<span>下单时间：2019-06-05 14:02</span></div>
                    <div class="item">
                      <a href="#" target="_blank">
                        <img src="https://img0.c.yinyuetai.com/user/myHomeSquare/151208/0/-M-5cc130a4e7896afcbd9e0763fb8c352a_200x200.jpg" width="80" height="80" alt="">
                        <div class="info">
                          <h4>CSS实现单行、多行文本溢出显示省略号的实现方法 重CSS实现单行、多行文本溢出显示省略号的实现方法</h4>
                        </div>
                      </a>
                    </div>
                  </td>
                  <td class="price">62.0元</td>
                  <td class="num">x11</td>
                  <td class="price2">72.0元</td>
                  <td class="opts">
                    <a href="#">订单详情</a>
                  </td>
                </tr>
                <tr>
                  <td class="id">
                    <div class="o_id">订单编号：19060566769254<span>下单时间：2019-06-05 14:02</span></div>
                    <div class="item">
                      <a href="#" target="_blank">
                        <img src="https://img0.c.yinyuetai.com/user/myHomeSquare/151208/0/-M-5cc130a4e7896afcbd9e0763fb8c352a_200x200.jpg" width="80" height="80" alt="">
                        <div class="info">
                          <h4>CSS实现单行、多行文本溢出显示省略号的实现方法 重CSS实现单行、多行文本溢出显示省略号的实现方法</h4>
                        </div>
                      </a>
                    </div>
                  </td>
                  <td class="price">62.0元</td>
                  <td class="num">x11</td>
                  <td class="price2">72.0元</td>
                  <td class="opts">
                    <a href="#">订单详情</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped src="./order.scss"></style>

